<template>
	<view class="my">
		<!-- login -->
		<view class="login" @click="login(url)">
			<view class="headPortrait">	
			</view>
			<view class="userName">
				<view class="word">
					<text @click="goLogin" class="name">{{userName || '登录/注册'}}</text>
					<text class="flag">在软考帮，遇见不一样的自己</text>
				</view>
				<view class="jiantou">
					<image src="../../static/icons/jiantou1.png" mode=""></image>
				</view>
			</view>
		</view>
		<!-- login end -->
		<view class="choose">
			<!-- todayStudy -->
			<view class="todayStudy">
				<view class="todayItem">
					<text class="title">今日学习</text>
					<text class="time">{{todayStudy.today}}</text>
					<text class="unit">min</text>
				</view>
				<view class="todayItem">
					<text class="title">本周学习</text>
					<text class="time">{{todayStudy.weekend}}</text>
					<text class="unit">h</text>
				</view>
				<view class="todayItem">
					<text class="title">累计学习</text>
					<text class="time">{{todayStudy.month}}</text>
					<text class="unit">天</text>
				</view>
			</view>
			<!-- todayStudy end -->
			<!-- store -->
			<view class="store">
				<view class="storeItem" v-for="(item,index) in storeItem" :key="index" @click="storeItemClick(item.path)">
					<image :src="item.icon" class="icons"></image>
					<text>{{item.title}}</text>
					<image src="../../static/icons/jiantou1.png" class="jiantou"></image>
				</view>
			</view>
			<!-- store end -->
			<view class="store">
				<view class="storeItem" v-for="(item,index) in downloadItem" :key="index" @click="downloadItemClick(item.path1)">
					<image :src="item.icon" class="icons"></image>
					<text>{{item.title}}</text>
					<image src="../../static/icons/jiantou1.png" class="jiantou"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userName:"",
				storeItem:[
					{
						icon:"../../static/icons/history.png",
						title:"观看历史",
						path:"/pages/my/history/history"
					},
					{
						icon:"../../static/icons/jifen.png",
						title:"积分",
						path:"/pages/my/jifen/jifen"
					},
					{
						icon:"../../static/icons/jifen.png",
						title:"我的下载",
						path:"/pages/my/download/download"
					},
					
				],
				downloadItem:[
					{
						icon:"../../static/icons/dingdan.png",
						title:"我的订单",
						path1:"/pages/my/dingdan/dingdan"
					},
					{
						icon:"../../static/icons/kefu.png",
						title:"客服",
						path1:"/pages/my/kefu/kefu"
					},
					{
						icon:"../../static/icons/shezhi.png",
						title:"设置",
						path1:"/pages/my/shezhi/shezhi"
					}
				]
			    ,
				todayStudy:{
					today:17,
					weekend:20,
					month:20
				}
			}
		},
		methods: {
			initUserInfo(){
				this.userName=uni.getStorageSync('username')
			},
			storeItemClick(url){
				uni.navigateTo({
					url
				})
			},
			downloadItemClick(url){
				uni.navigateTo({
					url
				})
			},
			
			login(url){
				uni.navigateTo({
					url:"../login/login"
				})
			}
		}
		,
		mounted() {
			this.initUserInfo();
		}
	}
</script>

<style lang="scss">
	page{
		background: #f7f7f7;
	}
.my{
	font-family: "微软雅黑";
	height: 100%;
	.login{
		height: 45px;
		display: flex;
		position: relative;
		overflow: hidden;
		padding:40rpx 20rpx 20rpx 20rpx;
		.headPortrait{
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			background: skyblue;
			margin-right: 20rpx;
		}
		.userName{
			width: 600rpx;
			display: flex;
			justify-content: space-between;
			margin-top: 6rpx;
			text{
				display: block;
			}
			.word{
				.name{
					font-size: 32rpx;
					margin-bottom: 10rpx;
				}
				.flag{
					font-size: 24rpx;
					color: #808080;
				}
			}
			.jiantou{
				margin-top: 10rpx;
				image{
					width: 20rpx;
					height: 20rpx;
				}
			}
		}
	}
	.choose{
		background: #f7f7f7;
		padding: 20rpx;
		.todayStudy{
			display: flex;
			justify-content: space-between;
			height: 160rpx;
			background: #fff;
			border-radius: 40rpx;
			.todayItem{
				text-align: center;
				margin: auto;
				.title{
					display: block;
					margin-bottom: 20rpx;
					font-size: 24rpx;
					color: #a3a3a3;
				}
				.time{
					font-size: 36rpx;
					font-weight: bold;
					margin-right: 10rpx;
				}
				.unit{
					font-size: 24rpx;
					color:#a3a3a3;
				}
			}
		}
		.store{
			background: #fff;
			border-radius: 40rpx;
			margin-top: 20rpx;
			padding: 20rpx;
			.storeItem{
				height: 100rpx;
				line-height: 100rpx;
				.icons{
					width: 40rpx;
					height: 40rpx;
					margin-top:-10rpx ;
					margin-right: 20rpx;
					vertical-align: middle;
				}
				.jiantou{
					width: 20rpx;
					height: 20rpx;
					float: right;
					margin-top: 40rpx;
					vertical-align: middle;
				}
			}
		}
	}
    
}
</style>
